// 混合(mixin)  => 使用@mixin命令，定义一个代码块, 是可以重用的代码块。
// 1. 定义代码块
// @mixin 名字{
//     代码块;
// }

// 2. 使用代码块
// @include 代码块名字

// @mixin typeAreaCenter {
//     width: $typeArea;
//     margin: 0 auto;
// }

// 3. mixin的强大之处，在于可以指定参数和缺省值(默认值)。
@mixin typeAreaCenter($width: 1226px) {
    // mixin中放的是css代码段
    width: $width;
    margin: 0 auto;
}

@mixin comp($cssKey, $cssVal) {
    @if($cssKey ==display and $cssVal==flex) {
        display: -webkit-flex;
        display: flex;
    }

    @else {
        // 传统的css3
        -ms-#{$cssKey}: $cssVal;
        -o-#{$cssKey}: $cssVal;
        -moz-#{$cssKey}: $cssVal;
        -webkit-#{$cssKey}: $cssVal;
        $cssKey: $cssVal;
    }


}